<template>
	<view>
		
		<!-- 自定义导航栏 -->
<!-- 		<u-navbar style="font-weight: bold;margin-bottom: 88rpx;" leftText="返回" title="已退款订单" :safeAreaInsetTop="false" bgColor="#3183FC" leftIconColor="#FFFFFF"
			:titleStyle="{ color: '#FFFFFF' }">
			<view class="u-nav-slot" slot="left">
				<div >
					<div @click="tzwdsy">
						<image style="width: 40rpx;" src="/static/wdimg/ztb-fh.png" mode="widthFix"></image>
					</div>
				</div>
			</view>
		</u-navbar> -->
		
		<div class="top">
			<div class="xxxg">


				<!-- 卡片开始 -->
				<uni-card class="xxxg-card" title="基础卡片" padding="10px 0" :thumbnail="avatar">
					<template v-slot:title>
						<div class="card-title">
							<div class="card-title-1" style="font-weight: bold;">订单信息</div>
							<div class="card-title-2" style="color: red;">已退款</div>
						</div>
					</template>

					<div class="card-center">

						<div class="card-center-fwxm aa">
							<span>订单号：</span>
							<span>121212112487878</span>
						</div>

						<div class="card-center-fwxm aa">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>

						<div class="card-center-fwmd aa">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>

						</div>

						<div class="card-center-xdsj aa">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-08</span>
							<span class="card-center-xdsj3">17:40</span>
						</div>

						<div class="card-center-xdsj aa">
							<span class="card-center-xdsj1">预约时间：</span>
							<span class="card-center-xdsj2">2023-03-09</span>
							<span class="card-center-xdsj3">17:40</span>
						</div>

						<div class="card-center-xdsj aa">
							<span class="card-center-xdsj1">车辆：</span>
							<span class="card-center-xdsj2">奔驰FWE4</span>
							<span>/</span>
							<span class="card-center-xdsj3">豫Gke968</span>
						</div>

						<div class="card-center-xdsj aa">
							<span class="card-center-xdsj1">备注：</span>
							<span class="card-center-xdsj2">不要香菜</span>

						</div>

					</div>

				</uni-card>
				<!-- 卡片结束 -->




				<!-- 卡片开始 -->
				<uni-card class="xxxg-card" title="基础卡片" padding="10px 0" :thumbnail="avatar">
					<template v-slot:title>
						<div class="card-title">
							<div class="card-title-1" style="font-weight: bold;">订单详情</div>
							<!-- 							<div class="card-title-2" style="color: red;">待支付</div> -->
						</div>
					</template>

					<div class="card-center">
						
						<div class="ddxq-part1">
							<div class="d-p-xmk">
								<div class="d-p-xmkl">车辆精洗</div>
								<div class="d-p-xmkr">￥<span>39.90</span></div>
							</div>
							<div class="d-p-xmk">
								<div class="d-p-xmkl">车辆附加费用</div>
								<div class="d-p-xmkr">￥<span>0</span></div>
							</div>
						</div>
						
						<div class="ddxq-part1">
							<div class="d-p-xmk">
								<div class="d-p-xmkl">原价</div>
								<div class="d-p-xmkr">￥<span>59.90</span></div>
							</div>
							<div class="d-p-xmk">
								<div class="d-p-xmkl">店家优惠</div>
								<div class="d-p-xmkr" style="color: red;">-￥<span>20</span></div>
							</div>
						</div>
						
						<div class="ddxq-part3">
							<div class="d-p-xmk">
								<div class="d-p-xmkl">优惠券</div>
								<div class="d-p-xmkr" style="color: red;">-￥<span>10</span></div>
							</div>
						</div>

					</div>

					<div class="card-button">
						<div class="card-button1">
							<div class="c-b-s">

								<span>支付金额</span>

							</div>
						</div>

						<div class="card-button2">

							<span>￥<span style="color: limegreen;">29.9</span></span>

						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->


			</div>
		</div>





		<div class="underbest">
			<div class="underbest-l">
				<div class="underbest-l-1">
					<image src="/static/wdimg/kf@2x.png" mode="widthFix"></image>
				</div>
				<div class="underbest-l-2">联系客服</div>
			</div>
			<div class="underbest-r">
				<div class="card-button2-d2"><button class="card-button2-b2">再来一单</button></div>
			</div>
		</div>






	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

			tzwddd() {
				uni.navigateTo({
					url: "/pages/my/wddd/wddd"
				})
			},
			tzdddzf() {
				uni.navigateTo({
					url: "/pages/my/wddd/dddzf/dddzf"
				})
			},
			tzdddsy() {
				uni.navigateTo({
					url: "/pages/my/wddd/dddsy/dddsy"
				})
			},
			tzdddpj() {
				uni.navigateTo({
					url: "/pages/my/wddd/dddpj/dddpj"
				})
			},
			tzpjym() {
				uni.navigateTo({
					url: "/pages/my/wddd/pjym/pjym"
				})
			},
			tzdpjdd() {
				uni.navigateTo({
					url: "/pages/my/wddd/dpjdd/dpjdd"
				})
			},
			tzwdsy(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			},


		}
	}
</script>

<style>
	.aa {
		margin-top: 10rpx;
	}

	.top {
		width: 750rpx;
		height: 400rpx;
		background-color: #3183FC;
		/* 	overflow: hidden; */
		/* 	background-image: url(@/static/wdimg/aaa.jpg); */
		position: relative;
	}

	.xxxg {
		position: absolute;
		width: 750rpx;

	}

	.xxxg-card {
		/* 		height: 500rpx; */
		/* 	width: 750rpx; */
		border-radius: 25rpx;
	}

	.wdyhq-dh {
		width: 100%;
		color: white;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		margin-bottom: 30rpx;
	}


	.card-title {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid gainsboro;
		height: 70rpx;
	}


	.card-center-fwmd {
		display: flex;

	}

	.card-center-fwmd1 {
		width: 65%;
		display: flex;
		/* 	background-color: red; */
	}

	.card-center-fwmd2 {
		width: 35%;
		display: flex;
		justify-content: center;
		color: blue;
	}

	.card-center-fwmd1-2 {
		margin-right: 20rpx;
	}

	.card-center-fwmd1-3 image {
		width: 25rpx;
	}

	.card-center-xdsj2 {
		margin-right: 20rpx;
	}



	.card-button {
		border-top: 1px solid gainsboro;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.card-button1 {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}


	.card-button2 {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;

	}



	.card-button2-b1 {
		font-size: 25rpx;
		border-radius: 20rpx;
		background-color: #BFBFBF;
		color: #ffff;
		margin-right: 10rpx;
	}

	.card-button2-b2 {
		font-size: 25rpx;
		border-radius: 20rpx;
		background-color: #1E72F0;
		color: #ffff;
		margin-right: 10rpx;
	}


	.ddxq-part1{
		border-bottom: 1px solid gainsboro;
		margin-bottom: 10rpx;
	}

	.d-p-xmk{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	

.ddxq-part3{
	margin-top: 20rpx;
}


.underbest{
	background-color: white;
	width: 750rpx;
	height: 100rpx;
	align-items: center;
}

.underbest-l{
	display: flex;
}

.underbest-l-1 image{
	margin-left: 10rpx;
	margin-right: 10rpx;
	width: 40rpx;
}



	.underbest {
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
	}

	.underbest-r {
		display: flex;
	}
</style>